<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
  <style>
     .money{
         background-color: greenyellow;
     }

     .money:before{
        display: inline-block;
         content: '$';
     }

     .email:after{
          display: inline-block;
          content: "@";
     }


     #head_wrapper .s_btn {
         cursor: pointer;
         width: 108px;
         height: 44px;
         line-height: 45px;
         line-height: 44px\9;
         padding: 0;
         background: 0 0;
         background-color: #4e6ef2;
         border-radius: 0 10px 10px 0;
         font-size: 17px;
         color: #fff;
         box-shadow: none;
         font-weight: 400;
         border: none;
         outline: 0;
     }

     #head_wrapper .s_btn:hover {
         background-color: #786777;
     }

  </style>
</head>
<body>

     <div class="money">
         <input></input>100
     </div>

     <span class="email">
        11223
     </span>
     <span>
         qq.com
     </span>


 <div id="head_wrapper">
     <button class="s_btn">
         按钮1
     </button>

 </div>
</body>
</html>